<template>
    <div style="min-width:809px">
       <div v-if="$route.path == '/personalAdmin/AttendanceList'">
        <div class="vs-search-box" style="padding: 24px 22px 0 0px;">
            <el-form ref="form" :inline="true" :model="paging" label-width="90px">
                <el-form-item label="门店">
                    <!-- <el-input style="width:230px" v-model="form.username"></el-input> -->
                    <el-select v-model="paging.store_id" style="width:187px" placeholder="请选择" >
                        <el-option
                            v-for="item in shopList"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                 <el-form-item label="申请人">
                    <el-input type="text" v-model="paging.store_name"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input type="text" v-model="paging.staff_phone"></el-input>
                </el-form-item>
                <el-form-item label="类型">
                    <el-select v-model="paging.type" placeholder="请选择"  style="width:187px" >
                        <el-option label="事假" :value="1"> </el-option>
                        <el-option label="病假" :value="2"> </el-option>
                        <el-option label="产假" :value="3"> </el-option>
                        <el-option label="婚嫁" :value="4"> </el-option>
                        <el-option label="陪产假" :value="5"> </el-option>
                        <el-option label="其他" :value="6"> </el-option>
                        <el-option label="年假" :value="7"> </el-option>
                        <el-option label="调休假" :value="8"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="" class="vs-right-btns">
                    <el-button @click="reset">重置</el-button>
                    <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                </el-form-item>
            </el-form>
            <!-- <div class="right">
                <el-button  @click="reset">重置</el-button>
                <el-button  type="primary" @click="handleCurrentChange(1)">查询</el-button>
            </div> -->
         </div>
        <div class="vs-table-box">
            <el-table v-loading="loading" :data="tableData"  style="width: 100%" :header-cell-style="{background:'#f5f6f8'}">
                <el-table-column width="60px" type="selection" ></el-table-column>
                <el-table-column prop="title" label="门店" ></el-table-column>
                <el-table-column prop="number" label="编号" > </el-table-column>
                <el-table-column prop="name" label="申请人"> </el-table-column>
                <el-table-column prop="position_title" label="职位"> </el-table-column>
                <el-table-column prop="phone" label="手机号"> </el-table-column>
                <el-table-column prop="type" label="请假/调休类型">
                <template slot-scope="scope">
                    <div>
                        {{scope.row.type | leaveType}}
                    </div>
                </template>
                </el-table-column>
                <el-table-column prop="create_time" label="申请日期"> </el-table-column>
                <el-table-column prop="day" label="天数（天）"> </el-table-column>
                <el-table-column fixed="right" width="160" label="操作"> 
                    <template slot-scope="scope">
                        <span class="tab-table-text btnClick"
                         @click="setDate(1,scope.row)"
                        >查看</span>
                        <!-- <span class="tab-table-text btnClick" v-if="scope.row.approval_status == true&&scope.row.status==1" @click="opens(2,scope.row)">批准</span>
                        <span class="tab-table-text btnClick" v-if="scope.row.approval_status == true&&scope.row.status==1" @click="open(3,scope.row)">驳回</span> -->
                        <span class="tab-table-text btnClick red"   v-if="scope.row.status==3">已驳回</span>
                        <span class="tab-table-text btnClick blue"   v-if="scope.row.status==2">已批准</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="vs-paging-box">
               <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="paging.page"
                    :page-size="paging.limit"
                    layout="prev, pager, next, jumper"
                    :total="paging.total">
                </el-pagination>
            </div>
        </div>
       </div>
       <router-view></router-view>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value:'',
            pagination:{
                page:1,//    当前页面
                page_size:10, //页面条数
                total:0,    //数据总数
            },
            paging: {
                store_id: '',//门店id
                start_time: '',//申请日期（传时间戳，10位的）
                store_name: '',//申请人（模糊搜索）
                staff_phone:'',//申请人电话（模糊搜索）
                type:'',//1事假、2病假、3产假、4婚嫁、5陪产假、6其他
                page: 1,
                total: 0,
                limit: 10,
                page_size:10, //页面条数
                id:'',
                approval_status:''
            },
            sta:{
                id:'',
                status:'',
                content:''
            },
            loading:false,
            shopList:[],
            tableData: []
        };
    },
    created() {
        this.homegetStore();
        this.getList();
    },
    methods: {
        setDate(type,row){
             if(type == 1){
                 this.$router.push(`/personalAdmin/AttendanceList/AttendanceDetails?title=请假详情&id=${row.id}`)
            }
        },
        async getList(){

            this.loading = true;
            let {code,data} = await this.$Http.staffleave(this.paging);
            this.loading = false;
            if(code){
                this.tableData = data.data;
                this.paging.total = data.total;
                console.log(44444444444444,this.paging);
            }
        },
        async homegetStore(){
            let {code,data} = await this.$Http.homegetStore();
            if(code){
                this.shopList = data;
            }
        },
        open(i,row) {
        this.$prompt('回复', '驳回', {
          confirmButtonText: '确定驳回',
          cancelButtonText: '取消',
        }).then(({ value }) => {
            this.sta.status = 3
            this.sta.content = value
            this.sta.id = row.id
            let {code,data} = this.$Http.leaveApprove(this.sta);
            if(code){
            console.log(222222333,this.sta);
            }
        })
      },
      opens(i,row) {
        this.$prompt('回复', '批准', {
          confirmButtonText: '确定批准',
          cancelButtonText: '取消',
        }).then(({ value }) => {
            this.sta.status = 2
            this.sta.content = value
            this.sta.id = row.id
            let {code,data} = this.$Http.leaveApprove(this.sta);
            if(code){
            console.log(2222244444,this.sta);
            }
        })
      },
        pickerDate(){

        },
        change(){

        },
        reset() {//重置
            this.value1 = '';
            this.paging = Object.assign(this.paging,{store_id:'',store_name:'', staff_phone:'',type:''})
            this.handleCurrentChange(1)
        },
        handleSizeChange(val) {
            this.paging.limit = val;
            this.getList()
        },
        handleCurrentChange(val) {
            this.paging.page = val;
            this.getList()
        }
    },
};
</script>

<style lang="scss" scoped>
.blue{ 
    color: #409EFF!important;
}
.red{ 
    color: #f56c6c!important;
}
.image-thumbnail{
    width: 130px;
    height: 130px;
}
.vs-search-box{
    display: flex;
    padding-right: 22px;
    justify-content: space-between;
    .right{
        width: 150px;
    }
}
.red{
    color: #f00 !important;
}
.operation-box{
    display: flex;
    justify-content: flex-end;
}
  .tab-table-text{
      color: #999 ;
  }
 .btnClick:active{
    color: #f00 !important;
  }

</style>